<script lang="ts" setup>
import {onMounted,onUnmounted, ref} from "vue";
import router from '@/router/index'
import {ElMessage} from "element-plus";

//导航栏部分
onMounted(()=>{
  getGoodsListFun()
})

//商品部分
import {getGoodsList, searchGoods} from '@/api/goods'
import HeaderMenu from "@/components/HeaderMenu.vue";
import FooterComponent from "@/components/FooterComponent.vue";
const goodsList = ref({})
const goodsAndInfo = ref({
  goods1: {
    goodsTitle:'速冻食品',
    titleImg:'src/assets/img/goods-consumer/banner06.jpg',
    listDetail: ['汤圆', '丸子', '小虾'],
    goodsArray:[]
  },
  goods2: {
    goodsTitle:'海鲜水产',
    titleImg:'src/assets/img/goods-consumer/banner02.jpg',
    listDetail: ['澳龙', '大鲵', '海蛇'],
    goodsArray:[]
  },
  goods3: {
    goodsTitle:'新鲜水果',
    titleImg:'src/assets/img/goods-consumer/banner01.jpg',
    listDetail: ['凤梨', '麒麟瓜', '芭蕉'],
    goodsArray:[]
  },
  goods4: {
    goodsTitle:'新鲜蔬菜',
    titleImg:'src/assets/img/goods-consumer/banner05.jpg',
    listDetail: ['折耳根', '香葱', '香菜'],
    goodsArray:[]
  }
})
const getGoodsListFun = async ()=>{
  let result = await getGoodsList()
  if (result.data.code == 200) {
    goodsList.value = result.data.data
    console.log('获取商品列表')
    console.log(result.data.data)

    goodsAndInfo.value.goods1.goodsArray = goodsList.value.goods1
    goodsAndInfo.value.goods2.goodsArray = goodsList.value.goods2
    goodsAndInfo.value.goods3.goodsArray = goodsList.value.goods3
    goodsAndInfo.value.goods4.goodsArray = goodsList.value.goods4
    console.log('新设置的商品信息')
    console.log(goodsAndInfo.value)

    ElMessage.success('获取商品列表成功')
  }else {
    ElMessage.error('获取商品列表失败')
  }
}
const slideImg = ref([
  'src/assets/img/goods-consumer/slide.jpg',
  'src/assets/img/goods-consumer/slide02.jpg',
  'src/assets/img/goods-consumer/slide03.jpg',
  'src/assets/img/goods-consumer/slide04.jpg',
])
//搜索
const searchGoodsInfo = ref({
  goodsName: '',
})
const searchGoodsFun = async ()=>{
  let result = await searchGoods(searchGoodsInfo.value.goodsName)
  if (result.data.code == 200) {
    ElMessage.success('搜索成功')
    console.log(result.data.data)
    goodsAndInfo.value.goods1.goodsArray = result.data.data.goods1
    goodsAndInfo.value.goods2.goodsArray = result.data.data.goods2
    goodsAndInfo.value.goods3.goodsArray = result.data.data.goods3
    goodsAndInfo.value.goods4.goodsArray = result.data.data.goods4
  }else {
    ElMessage.error('搜索失败')
  }
}
const resetSearchGoodsFun = ()=>{
  getGoodsListFun()
  searchGoodsInfo.value.goodsName = ''
}
//点击进入商品详情页面
const getGoodsDetail = (gid)=>{
  console.log("gid:"+gid)
  // router.push({name:'GoodsDetail',params:{gid:gid}})
  router.push('/goodsDetail/'+gid)
}

//websocket消息提醒
const message = ref('');
let socket;
const isReceiveMsg = ref(false)
const connectWebSocket = ()=>{
  if ('WebSocket' in window) {
    // 创建 WebSocket 连接
    socket = new WebSocket('ws://localhost:5000/user/notifyToUser');
    // 当 WebSocket 连接打开时执行
    socket.onopen = () => {
      console.log('WebSocket 连接已打开');
    };

    // 当接收到消息时更新 message
    socket.onmessage = (event) => {
      message.value = event.data;
      console.log('收到消息:', event.data)
      isReceiveMsg.value = true
      ElMessage.info("你收到一条秒杀活动的提醒，请前往秒杀抢购")
    };

    // 当 WebSocket 连接关闭时执行
    socket.onclose = () => {
      console.log('WebSocket 连接已关闭');
    };

    // 当 WebSocket 连接发生错误时执行
    socket.onerror = (error) => {
      console.error('WebSocket 连接发生错误:', error);
    };
  }else {
    console.error('WebSocket 不支持')
  }
}
onMounted(() => {
  connectWebSocket()
});

onUnmounted(() => {
  // 组件销毁时关闭 WebSocket 连接
  if (socket) {
    socket.close();
  }
});
</script>

<template>
  <body>
  <HeaderMenu></HeaderMenu>
  <div class="search_bar clearfix">
    <a href="/index" class="logo fl">
      <img src="../assets/img/user-consumer/jmlogo.png" class="index-logo">
    </a>
    <div class="search_con fl my-search">
      <button class="input_btn input_btn01 fr my-search-btn" @click="resetSearchGoodsFun">重置</button>
      <input type="text" class="input_text fl" name="name" placeholder="搜索商品" v-model="searchGoodsInfo.goodsName">
      <button class="input_btn fr my-search-btn" @click="searchGoodsFun">搜索</button>
    </div>
  </div>

  <form method="get">
    <div class="navbar_con">
      <div class="navbar">
        <h1 class="fl my-fl">全部商品分类</h1>
        <ul class="navlist fl">
          <li><a href="/index">首页</a></li>
        </ul>
      </div>
    </div>


    <div class="center_con clearfix">
      <ul class="subnav fl">
        <li><a href="#model01" class="fruit">新鲜水果</a></li>
        <li><a href="#model02" class="seafood">海鲜水产</a></li>
        <li><a href="#model03" class="meet">新鲜蔬菜</a></li>
        <li><a href="#model04" class="egg">速冻食品</a></li>
      </ul>

      <div class="slide fl">
        <div class="block text-center">
          <!-- 轮播图 -->
          <el-carousel height="270px" motion-blur>
            <el-carousel-item v-for="(imgAddress,index) in slideImg" :key="index">
              <img :src='imgAddress'>
              <h3 class="small justify-center" text="2xl">{{ index }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="adv fl">
        <a href="#"><img src="@/assets/img/goods-consumer/adv01.jpg"></a>
        <a href="#"><img src="@/assets/img/goods-consumer/adv02.jpg"></a>
      </div>
    </div>

    <div class="list_model" v-for="(goods,index) in goodsAndInfo">
      <div class="list_title clearfix">
        <h3 class="fl my-fl-text" id="model06">{{goods.goodsTitle}}</h3>
        <div class="subtitle fl">
          <span>|</span>
          <a href="#" v-for="(title,index) in goods.listDetail">
            {{title}}
          </a>
        </div>
      </div>
      <div class="goods_con clearfix" >
        <div class="goods_banner fl"><img :src="goods.titleImg"></div>
        <ul class="goods_list fl">
          <li v-for="(goods1,index) in goods.goodsArray" @click="getGoodsDetail(goods1.gid)">
            <h4>{{goods1.gname}}</h4>
            <img :src="goods1.gremain">
            <div class="prize" >
              ￥{{goods1.gprice}}
            </div>
            <div class="stockText">
              <span>库存：{{goods1.stock}}件</span>
            </div>
          </li>
        </ul>
      </div>
    </div>

  </form>

  <FooterComponent></FooterComponent>
  </body>
</template>
<!-- 此处两个css全局生效，只需要一次引入即可 -->
<style src="../assets/css/goods/reset.css"></style>
<style src="../assets/css/goods/main.css"></style>
<style scoped>
.input_btn01 {
  position: absolute;
}
.input_text {
  padding-left: 70px;
  box-sizing: border-box;
}
.index-logo {
  width: 100px;
  height: 40px;
}
.stockText {
  font-size: 15px;
}
.my-search {
  border: #2d65d1 2px solid;
}
.my-search .my-search-btn, .my-fl {
  background-color: #2d65d1;
}
.navbar_con , .list_title{
  border-bottom-color: #3c6efd;
}
.my-fl-text {
  color: #3c6efd;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

</style>
